<%--
  Created by IntelliJ IDEA.
  User: xshuai
  Date: 2020/8/10/0010
  Time: 8:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
</head>
<body>
<label for="userName">
    用户名称:
    <input type="text" id="userName">
</label>
<label for="remark">
    备注:
    <input type="text" id="remark">
</label>
<button>提交</button>
<table id="demo" lay-filter="test"></table>

<script src="../../../layui/layui.js"></script>
<script>
    layui.use(['table', 'jquery'], function () {
        var $ = layui.jquery;
        $('button').click(function () {
            let userName = $("#userName").val()
            let remark = $("#remark").val()
            $.post({
                url: "/user/findUsers",
                data: {
                    userName: userName,
                    note: remark
                },
                dataType: "json",
                // contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(data)
                }
            })
            table.render({
                elem: '#demo'
                , height: 312
                , url: "/user/findUsers?userName=" + userName + "&note=" + remark//数据接口
                , cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'userName', title: '用户名',}
                    , {field: 'note', title: '备注', sort: true}
                ]]
                , page: true
                , parseData: function (res) {
                    console.log(res)//将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": '', //解析提示文本
                        "count": 8, //解析数据长度
                        "data": res//解析数据列表
                    };
                }
                , error: function (e) {
                    console.log(e)
                }
            });
        });
        <%--$.ajax("/user/findUsers?${}")--%>
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: "/user/list?userName=zhangsan&note=zs"//数据接口
            , cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'userName', title: '用户名',}
                , {field: 'note', title: '备注', sort: true}
            ]]
            , page: true
            , parseData: function (res) {
                console.log(res)//将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": 8, //解析数据长度
                    "data": res//解析数据列表
                };
            }
            , error: function (e) {
                console.log(e)
            }
        });
    });
</script>
</body>
</html>
